<template>
  <el-tooltip class="item" :effect="props.effect"
              :disabled="disabled"
              :placement="props.placement" :open-delay="props.openDelay"
              :popper-class="props.popperClass">
    <template #content>
      <div class="showTipWarp" :style="{width: actionWrapWidth}">
        <span v-if="htmlText" v-html="htmlText"></span>
        <span v-else>{{ props.text }}</span>
      </div>
    </template>
    <div @mouseenter="onmouseenter()" class="text_container border_base" :style="{width: props.width}" ref="text_container">
      <span ref="show_text" class="show_text" v-if="htmlText" v-html="htmlText"></span>
      <span ref="show_text" class="show_text" v-else>{{ props.text }}</span>
    </div>
  </el-tooltip>
</template>

<script setup>

import {ref} from "vue";

const props = defineProps({
  width: {
    type: String,
    default: function() {
      return "100%";
    }
  },
  wrapWidth: {
    type: String,
    default: function() {
      return "100%";
    }
  },
  text: {
    type: String,
    default: function() {
      return "";
    }
  },
  htmlText: {
    type: String,
    default: function() {
      return "";
    }
  },
  effect: {
    type: String,
    default: function() {
      return "dark";
    }
  },
  placement: {
    type: String,
    default: function() {
      return "top";
    }
  },
  openDelay: {
    type: Number,
    default: function() {
      return 0;
    }
  },
  popperClass: {
    type: String,
    default: function() {
      return "";
    }
  }
})
let show_text = ref(null)
let text_container = ref(null)
let disabled = ref(true)
let actionWrapWidth = ref('100%')
const showTextWidth = () => {
  return show_text.value?.offsetWidth || 0;
}
const textContainerWidth = () => {
  return text_container.value?.offsetWidth || 0;
}
const onmouseenter = () => {
  disabled.value = showTextWidth() < textContainerWidth();
  if (disabled.value) return
  actionWrapWidth.value = props.wrapWidth.includes('px') ? props.wrapWidth : textContainerWidth() * Number(props.wrapWidth.split('%')[0]) / 100 + 'px'
}

</script>

<style scoped lang="less">
.text_container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>